import React , {useEffect, useState }from 'react'
import Header from '../components/Header'
import Content from '../components/Content'
import axios from 'axios'
import Appson from './Appson'
// 受控组件，一般用于表单元素，input框，chebbox ，radio 
// 非受控组件 一般用于表单元素  非受控组件的值不受状态的控制
// Components文件夹里一般放一些局部组件
function App() {
  let [val,setVal] = useState("")
  let [val1,setVal1] = useState("")
  let [arr,setArr] = useState([])
  let [flag,setFlag] = useState(true)
  let [name,setName] = useState("zhangsn")
  useEffect(()=>{
     axios.get("/api/tablist").then(res=>{
         setArr(res.data)
     })
  },[]) // 当useEffect第二个参数为一个空数组的时候相当于类组件的componetDidmounted
  useEffect(()=>{
    console.log("render");

  },[val])  // 当useEffect的依赖项有值的时候，相当于compentDidupdate，相当于vue里的watch，vue里的watch是侦听器，监听到
  // 依赖项的变化就执行
  let changeVal = (e)=>{
    // 只有val发生改变的时候，输入框才可以输入东西
     console.log(e.target.value);
     setVal(e.target.value)
  }
  let changeVal1 = (e)=>{
    // 只有val发生改变的时候，输入框才可以输入东西
     console.log(e.target.value);
     setVal1(e.target.value)
  }
  let changeFlag = (e)=>{
      console.log(e.target.checked);
      setFlag(e.target.checked)
  }
  let fn = ()=>{
    setName("lisi")
  }
  return (
    <div>
        <h1>
          {name}
        </h1>
        {
            arr && arr.length ?  <Header arr={arr}></Header> :"暂无数据"
        }
        {
            arr && arr.length ? <Content  arr={arr}></Content> :"暂无数据"
        }
        <input type="text" defaultValue={val1}  onChange={changeVal1}/>
        <input type="text" value={val} onChange={changeVal} /> <button onClick={fn}>获取输入框的值</button>
        <input type="checkbox" checked={flag} onChange={changeFlag} />
        {
          flag ? <Appson></Appson> :""
        }

    </div>
  )
}

export default App



// import { useEffect, useState } from 'react';

// const Example = () => {
//   const [count, setCount] = useState(0);

//   useEffect(() => {
//     console.log("哈哈哈，useEffect 又执行了");
//     return () => {
//       console.log("看到我就知道执行了清除机制(～￣▽￣)～");
//     };
//   }, [count]);

//   return (
//     <div>
//       <p>那啥，你点了我 {count} 次 ⏲️⏲️⏲️⏲️</p>
//       {console.log("这是 dom 节点渲染了，小样╭(╯^╰)╮")}
//       <button
//         onClick={() => {
//           setCount(count + 1);
//         }}
//       >
//         你觉得你点击我之后会发生什么⛏️⛏️⛏️
//       </button>
//     </div>
//   );
// };

// function App() {
//   return (
//     <div className="App">
//       <Example />
//     </div>
//   );
// }

// export default App;

